// import { useState } from 'react'

import { useSearchParams, useParams, useLocation } from 'react-router-dom'

// 引入的这些方法要写在函数组件里面
function Test() {
  // 获取路由地址上  ?  后面绑定的参数
  let [params1] = useSearchParams()
  console.log('路由参数', params1.get('code'))

  // 获取路由动态绑定的参数  /:id
  let params2 = useParams()
  console.log('路由动态绑定id', params2.id)

  let { id } = useParams()
  console.log('写法二：路由动态绑定id', id)

  let { state }: any = useLocation()
  console.log('link to参数：', state?.name)

  return (
    <>
      <p>当前路由地址： /test </p>
      <p>当前浏览器完整地址：{window.location.href}</p>
      <p>当前路由参数：{params1.get('code') || '无'}</p>
      <p>当前路由动态绑定id：{params2.id || '无'}</p>
    </>
  )
}
export default Test
